<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../../lib/echarts/echarts.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="main" style="width:600px; height:400px;"></div>
    <script>
        var myChart = echarts.init(main);
        var option = {
            title: {
                text: 'ECharts 入门示例',
                textStyle:{
                    color:'purple',
                }
            },
            grid:{
                left:'20%',
                top:120,
                right:'20%',
                bottom:120,
                
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: []
            }]
        };
        myChart.showLoading();
        var names = [];
        var nums = [];
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4 && xhr.status==200){
                console.log(xhr.responseText);
                var dataSell = JSON.parse(xhr.responseText);
                console.log(dataSell)
                dataSell.items.forEach(element => {
                    names.push(element.name);
                    nums.push(element.num*1);
                });
                console.log(names);
                console.log(nums);
                myChart.hideLoading();
                myChart.setOption({
                    xAxis: {
                        data: names,
                    },
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: nums,
                    }]
                })
            }
        }
        xhr.open('GET','https://www.easy-mock.com/mock/5d0de4f2b596d756a7afd9fb/TS/testSell');
        xhr.send();
        myChart.setOption(option);
    </script>
</body>
</html>